<template>
    <div class="row" :style="{ marginTop: '24px' }">
        <div class="col">
            <div v-show="question.background" class="text-h m-10">题目背景</div>
            <div v-show="question.background" class="question-html" v-html="question.background"></div>
            <div v-show="question.context" class="text-h m-10">题目描述</div>
            <div class="text-32 question-html" v-html="question.context"></div>
            <div v-show="question.inputformat" class="text-h m-10">输入描述</div>
            <div class="text-32 question-html" v-show="question.inputformat" v-html="question.inputformat"></div>
            <div v-show="question.outputformat" class="text-h m-10">输出描述</div>
            <div class="text-32 question-html" v-show="question.outputformat" v-html="question.outputformat"></div>
            <div v-show="question.exampletest?.length" class="text-h m-10"></div>
            <el-row :gutter="20" v-for="(v, k) in question.exampletest" :key="`3-${k}`">
                <el-col :span="12">
                    <el-row>
                        <el-col :span="12">
                            <span class="text-h m-10 font-size14">样例输入 #{{ k + 1 }}</span>
                        </el-col>
                        <el-col :span="12" class="text-right">
                            <el-link class="font-size14" :underline="false" type="primary"
                                @click="myCopy(v.input)">复制</el-link>
                        </el-col>
                    </el-row>
                    <div class="pre-index">
                        <el-icon class="icon" @click="myCopy(v.input)">
                            <CopyDocument />
                        </el-icon>
                        <pre v-text="v.input" />
                    </div>

                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="12">
                            <span class="text-h m-10 font-size14">样例输出 #{{ k + 1 }}</span>
                        </el-col>
                        <el-col :span="12" class="text-right">
                            <el-link class="font-size14" :underline="false" type="primary"
                                @click="myCopy(v.output)">复制</el-link>
                        </el-col>
                    </el-row>
                    <div class="pre-index">
                        <el-icon class="icon" @click="myCopy(v.output)">
                            <CopyDocument />
                        </el-icon>
                        <pre v-text="v.output" />
                    </div>
                </el-col>
            </el-row>
            <div v-if="question.tips" class="text-h m-10">说明</div>
            <div v-show="question.tips" class="question-html" v-html="question.tips"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CopyDocument } from '@element-plus/icons-vue';
import { useClipboard } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import { computed, nextTick, onMounted, watch } from 'vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import questionhtml, { markdownhtml } from '../../../util/htmlstring';
const props = defineProps<{ question: Studycodemodel.Iquestion | Studycodemodel.Imatchquestion, isexample?: boolean }>()
const { text, copy, copied, isSupported } = useClipboard()
const question = computed(() => {
    return markdownhtml(props.question)
})

onMounted(() => {
    nextTick(() => {
        questionhtml()
    })
})

watch(() => props.question, () => {
    nextTick(() => {
        questionhtml()

    })
})

function myCopy(str: string) {
    try {
        str ? copy(str) : '';
        ElMessage.success("复制成功");
    } catch (error) {
        console.log("myCopy error=>", str, error)
    }
}

</script>

<style scoped>
.text-h {
    font-size: 14px;
    font-weight: bolder;
    color: #4683FA;
    margin-bottom: 6px;
}

.pre-index {
    position: relative;
    transition: background-color .5s;
}

.pre-index:hover .icon {
    opacity: 1;
}

.pre-index .icon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .4s;
}

.question-html {
    font-size: var(--font-size);
}

.question-html p {
    font-size: var(--font-size);
}

pre {
    font-size: var(--font-size);
}

.question-html h1 {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--color-303133);
}

.question-html h2 {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--color-303133);
}

.question-html h3 {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--color-303133);
}

.question-html h4 {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--color-303133);
}

.question-html h5 {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--color-303133);
}

.question-html h6 {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--color-303133);
}
</style>